<template>
    <div class="crop-content" v-if="showcrop">
        <div class="crop_inner">
            <div class="crop_btn_wrap">
                <a class="crop_btn crop_cancel" @click="cancelCrop" href="javascript:void(0);">取消</a>
                <a class="crop_btn crop_save" @click="saveCrop" href="javascript:void(0);">保存</a>
            </div>
            <vue-croppie
                    ref="croppieRef"
                    :enableOrientation="true"
                    :boundary="{ width: width, height: height}"
                    :viewport="{ width: showW, height: showH}"
                    :enable-exif="true"
                    :enable-resize="false"
                    :show-zoomer="false"
            ></vue-croppie>
        </div>
    </div>
</template>
<script>
  import Vue from "vue";
  import VueCroppie from "vue-croppie";
  import "croppie/croppie.css";

  Vue.use(VueCroppie);
  export default {
    name: "crop",
    data() {
      return {
        img: "",
        showcrop: false,
        width: "",
        height: "",
        callback: null,
        showH: '',
        showW: ''
      };
    },
    beforeDestroy() {
      this.img = "";
      this.callback = null;
    },
    methods: {
      saveCrop() {
        const self = this
        this.$refs.croppieRef.result({
          type: 'canvas',
          size: {
            width: self.showW * 2,
            height: self.showH * 2
          }
        }, (data) => {
          self.showcrop = false
          self.$emit('save', data)
        })
      },
      cancelCrop() {
        this.showcrop = false;
      },
      init(imgurl, callback) {
        this.showcrop = true;
        if (callback) {
          this.callback = callback;
        }
        this.width = window.innerWidth;
        this.height = window.innerHeight - 50;
        this.showW = parseInt(window.innerWidth * 0.9)
        this.showH = parseInt(this.showW * 1.176)
        this.img = imgurl;
        this.$nextTick(() => {
          this.$refs.croppieRef.bind({
            url: this.img,
            zoom: 0
          });
          // this
        });
      }
    },
    components: {}
  };
</script>
<style lang="">
    .showImg {
        width: 4.68rem;
        height: 3.82rem;
        position: absolute;
        top: 0.75rem;
        left: 1.53rem;
        z-index: 5;
        opacity: 0;
        pointer-events: none;
    }

    .crop-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #111;
        z-index: 1000;
    }

    .crop-content .crop_btn {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        vertical-align: middle;
        border-radius: 4px;
    }

    .crop_save {
        background-color: darkcyan;
        margin-left: 20px;
    }

    .crop_btn_wrap {
        position: absolute;
        width: 100%;
        height: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        text-align: center;
        padding: 10px 0;
        background-color: #fff;
    }

    .crop_cancel {
        background-color: #ccc;
    }

    .crop-content .crop_inner {
        width: 100%;
        height: 100%;
        position: relative;
    }
</style>
